@heathmont/moon-themes

---

name: Introduction menu: Themes route: /themes/introduction

Introduction

Themes hold the design tokens for our individual brands and are an integral part of our UI.

Setup

1. Choose a Theme

Currently available themes include:

2. App Root

Wrap your entire application with the <ThemeProvider />, providing your preferred theme via the theme prop.

Be sure to include Global styles, as these will inherit the theme and set the integral style foundations for your app.

/* App.tsx */
import React from 'react';
import { Global } from '@heathmont/moon-global';
import { ThemeProvider, sportsbetDark } from '@heathmont/moon-themes';

export const App = () => (
  <ThemeProvider theme={sportsbetDark}>
    <React.Fragment>
      <Global />
      <main>{/* Your App… */}</main>
    </React.Fragment>
  </ThemeProvider>
);

3. TypeScript Support

If you're using TypeScript, you can extend styled-components' types to include our theming schema.

To make use of extra features (such as auto-completion in VSCode), create a d.ts file with the following:

/* types/styled-components.d.ts */
import 'styled-components';
import { Theme } from '@heathmont/moon-themes';

declare module 'styled-components' {
  export interface DefaultTheme extends Theme {}
}

Using Themes

With Styled Components

The theme context is included by default in styled components props, and can be implemented as follows:

import styled from 'styled-components';

/* Access `theme` from styled component props */
const Example = styled.div(({ theme }) => ({
  display: 'block',
  color: theme.color.bulma[100],
  padding: theme.space.default,
}));

/* Alternatively, destructure the theme properties… */
const Example = styled.div(({ theme: { color, space } }) => ({
  display: 'block',
  color: color.bulma[100],
  padding: space.default,
}));

Without Styled Components

The useTheme helper function returns the current theme from the theme context:

import React from 'react';
import { useTheme } from '@heathmont/moon-themes';

const Example = () => {
  const theme = useTheme();

  return <p>{theme.brand}</p>; /* Returns the theme brand name. */
};

or for more manual control:

import React from 'react';
import { ThemeContext } from '@heathmont/moon-themes';

const Example = () => {
  const theme = React.useContext(ThemeContext);

  return <p>{theme.brand}</p>; /* Returns the theme brand name. */
};

Changelog

2.97.0 (2021-05-19)

Bug Fixes

• eslint (a21a029)
• get inherit color for search placeholder from input B1M2-1322
• remove eslint-config-airbnb and prettier-config-sportsbet (1f27061)
• use internal eslint config (61a8bcb)
• utorg logo updated (25ebfd0)
• chip: remove unnecessary console debug (109ab20)

Features

• delete depracated configs (e2cc6b8)
• utorg logo BASE1-1441
• badge: add icons to badges (0ed4543)
• chip: add Chip component (8439dfc)
• popover: add colorBackground prop to popover (137536e)